<!DOCTYPE html>
<html lang="en">

<head>
    <#include "/pages/admin_include/head.html"/>
</head>

<body data-type="widgets">
<script src="pages/admin/assets/js/theme.js"></script>
<div class="am-g tpl-g">
    <!-- 头部 -->
    <#include "/pages/admin_include/header.html"/>
    <!-- 风格切换 -->
    <#include "/pages/admin_include/theme.html"/>
    <!-- 侧边导航栏 -->
    <#include "/pages/admin_include/menu.html"/>

    <!-- 内容区域 -->
    <div class="tpl-content-wrapper">
        <div class="row-content am-cf">

            <div class="row">

                <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                    <div class="widget am-cf">
                        <div class="widget-head am-cf">
                            <div class="widget-title am-fl">新增图片</div>
                            <div class="widget-function am-fr">
                                <a href="javascript:;" class="am-icon-cog"></a>
                            </div>
                        </div>
                        <div class="widget-body am-fr">
                            <form class="am-form tpl-form-border-form tpl-form-border-br" method="post" action="admin/picture/save" enctype="multipart/form-data">
                                <div class="am-form-group">
                                    <label for="name" class="am-u-sm-3 am-form-label">图片名称
                                        <span class="tpl-form-line-small-title">Column Name</span>
                                    </label>
                                    <div class="am-u-sm-9">
                                        <input type="hidden" name="id" value="${(picture.id)!}">
                                        <input type="text" class="tpl-form-input" id="name" name="name" value="${(picture.name)!}" placeholder="图片名称" required>
                                        <small>请填写图片名称，不能为空。</small>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="columnId" class="am-u-sm-3 am-form-label">所属栏目 <span class="tpl-form-line-small-title">Column</span></label>
                                    <div class="am-u-sm-9">
                                        <select id="columnId" name="columnId" data-am-selected="{searchBox: 1}" style="display: none;">
                                            <option value="0">无</option>
                                            <#list columns as c>
                                                <#if picture?? && (c.id)==(picture.columnId)>
                                                    <option value="${c.id}" selected>${c.name!}</option>
                                                <#else>
                                                    <option value="${c.id}">${c.name!}</option>
                                                </#if>
                                            </#list>
                                        </select>
                                    </div>
                                </div>

                                <div class="am-form-group">
                                    <label class="am-u-sm-3 am-form-label">序号
                                        <span class="tpl-form-line-small-title">No.</span></label>
                                    <div class="am-u-sm-9">
                                        <input type="text" name="orderNo" value="${(picture.orderNo)!}"  placeholder="请填写序号">
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="doc-form-file" class="am-u-sm-3 am-form-label">封面图 <span class="tpl-form-line-small-title">Images</span></label>
                                    <div class="am-u-sm-9">
                                        <div class="am-form-group am-form-file">
                                            <div class="tpl-form-file-img">
                                                <div id="file-list"></div>
                                            </div>
                                            <button type="button" class="am-btn am-btn-danger am-btn-sm">
                                                <i class="am-icon-cloud-upload"></i> 选择要上传的图片</button>
                                            <input id="doc-form-file" name="file" type="file" multiple>
                                        </div>
                                        <script>
                                            $(function() {
                                                $('#doc-form-file').on('change', function() {
                                                    var fileNames = '';
                                                    $.each(this.files, function() {
                                                        fileNames += '<span class="am-badge">' + this.name + '</span> ';
                                                    });
                                                    $('#file-list').html(fileNames);
                                                });
                                            });
                                        </script>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <label for="picture-intro" class="am-u-sm-3 am-form-label">摘要
                                        <span class="tpl-form-line-small-title">Summary</span></label>
                                    <div class="am-u-sm-9">
                                        <textarea class="" rows="10" id="picture-intro" name="summary" placeholder="请输入摘要内容">${(picture.summary)!}</textarea>
                                    </div>
                                </div>
                                <div class="am-form-group">
                                    <div class="am-u-sm-9 am-u-sm-push-3">
                                        <button type="submit" class="am-btn am-btn-primary tpl-btn-bg-color-success ">
                                            提交
                                        </button>
                                        <a type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success " href="admin/picture?pageNumber=${pageNumber!}&pageSize=${pageSize!}">
                                            返回
                                        </a>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
<!-- footer_js -->
<#include "/pages/admin_include/footer_js.html"/>

</body>

</html>